<template>
  <div class="notice-center">
    <div class="personal-info">
      <h2 class="title">通知中心</h2>
      <div class="search-container">
        <el-input v-model="searchQuery" placeholder="请输入通知标题进行查询" class="search-input"></el-input>
        <el-button type="primary" @click="searchNotices" class="search-button">查询</el-button>
      </div>
      <!-- 加载中提示 -->
      <div v-if="isLoading" class="loading-container">加载中...</div>
      <table v-else-if="noticeForm && noticeForm.data && noticeForm.data.records.length > 0"
             style="text-align: center; width: 99%; border-collapse: collapse; ">
        <thead>
        <tr>
          <th style="width: 150px; height: 50px; border: 1px solid #eee;">通知标题</th>
          <th style="width: 200px; height: 50px; border: 1px solid #eee;">发布时间</th>
          <th style="width: 200px; height: 50px; border: 1px solid #eee;">更新时间</th>
          <th style="width: 50px; height: 50px; border: 1px solid #eee;">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, index) in noticeForm.data.records" :key="index" style="border: 1px solid #eee;">
          <td style="width: 150px; height: 40px; border: 1px solid #eee;">
            <el-input v-model="item.title" disabled class="disabled-style"></el-input>
          </td>
          <td style="width: 200px; height: 40px; border: 1px solid #eee;">
            <el-input v-model="item.publishDate" disabled class="disabled-style"></el-input>
          </td>
          <td style="width: 200px; height: 40px; border: 1px solid #eee;">
            <el-input v-model="item.updateDate" disabled class="disabled-style"></el-input>
          </td>
          <td style="width: 50px; height: 40px; border: 1px solid #eee;">
            <div class="button-group">
              <el-button type="danger" @click="handleViewDetail(item)">详情</el-button>
            </div>
          </td>
        </tr>
        </tbody>
      </table>
      <div v-else-if="errorMessage">{{ errorMessage }}</div>
      <div v-else>暂无通知记录</div>
      <div style="display: flex; justify-content: center; width: 100%;">
        <el-pagination
            v-if="noticeForm && noticeForm.data"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[2, 4, 6]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="noticeForm.data.total"
        >
        </el-pagination>
      </div>

      <el-dialog v-model="dialogVisible" title="通知详情">
        <template #default>
          <table style="width: 100%; border-collapse: collapse;">
            <thead>
            <tr>
              <th style="width: 100px; border: 1px solid #eee;">属性</th>
              <th style="border: 1px solid #eee;">详情</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td style="border: 1px solid #eee;">通知标题</td>
              <td style="border: 1px solid #eee;">{{ currentNotice.title }}</td>
            </tr>
            <tr>
              <td style="border: 1px solid #eee;">发布时间</td>
              <td style="border: 1px solid #eee;">{{ formatDate(currentNotice.publishDate) }}</td>
            </tr>
            <tr>
              <td style="border: 1px solid #eee;">更新时间</td>
              <td style="border: 1px solid #eee;">{{ formatDate(currentNotice.updateDate) }}</td>
            </tr>
            <tr v-if="currentNotice.content">
              <td style="border: 1px solid #eee;">通知内容</td>
              <td style="border: 1px solid #eee;">
                <pre style="white-space: pre-wrap; word-wrap: break-word;">{{ currentNotice.content }}</pre>
              </td>
            </tr>
            <tr v-else>
              <td style="border: 1px solid #eee;">通知内容</td>
              <td style="border: 1px solid #eee;">无</td>
            </tr>
            <tr v-if="currentNotice.attachment">
              <td style="border: 1px solid #eee;">附件</td>
              <td style="border: 1px solid #eee;">
                <el-button type="text" @click="downloadFile(currentNotice.attachment)">下载附件</el-button>
              </td>
            </tr>
            <tr v-else>
              <td style="border: 1px solid #eee;">附件</td>
              <td style="border: 1px solid #eee;">无</td>
            </tr>
            <tr v-if="currentNotice.remark">
              <td style="border: 1px solid #eee;">通知备注</td>
              <td style="border: 1px solid #eee;">{{ currentNotice.remark }}</td>
            </tr>
            </tbody>
          </table>
        </template>
        <template #footer>
          <el-button @click="dialogVisible = false">关闭</el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { ElMessage } from 'element-plus';

export default {
  data() {
    return {
      noticeForm: {
        id: "",
        title: "",
        content: "",
        attachment: "",
        remark: "",
        propertyStaffId: "",
        publishDate: "",
        updateDate: ""
      },
      searchQuery: '',
      isLoading: false,
      dialogVisible: false,
      currentNotice: {},
      errorMessage: '',
      currentPage: 1,
      pageSize: 6,
      isEdit: false,
    };
  },
  methods: {
    formatDate(date) {
      if (!date) return '';
      return new Date(date).toLocaleDateString();
    },
    async getNotices() {
      this.isLoading = true;
      try {
        const token = localStorage.getItem('token');
        let url = '/api/notice/personal';
        let params = {
          current: this.currentPage,
          size: this.pageSize,
        };
        const response = await axios.get(url, {
          headers: {
            Authorization: token
          },
          params: params
        });
        console.log("notice", response);
        this.noticeForm = response.data;
      } catch (error) {
        console.error('获取通知列表失败', error);
        this.errorMessage = '获取数据失败，请稍后重试';
      } finally {
        this.isLoading = false;
      }
    },
    async handleViewDetail(row) {
      this.currentNotice = { ...row };
      const token = localStorage.getItem('token');
      const id = row.id;
      this.isLoading = true;
      try {
        const response = await axios.get(`/api/notice/all/${id}`, {
          headers: {
            Authorization: token
          }
        });
        console.log("notice", response);
        if (response.data.code === 200) {
          this.currentNotice = response.data.data[0];
        }
        this.dialogVisible = true;
      } catch (error) {
        console.error('获取通知详情失败', error);
        ElMessage.error('获取通知详情失败，请稍后重试');
      } finally {
        this.isLoading = false;
      }
    },
    async searchNotices() {
      this.isLoading = true;
      try {
        const token = localStorage.getItem('token');
        let url = '/api/notice/personal';
        let params = {
          current: this.currentPage,
          size: this.pageSize,
          title: this.searchQuery
        };
        const response = await axios.get(url, {
          headers: {
            Authorization: token
          },
          params: params
        });
        this.noticeForm = response.data;
      } catch (error) {
        console.error('查询通知失败', error);
        this.errorMessage = '查询数据失败，请稍后重试';
      } finally {
        this.isLoading = false;
      }
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.currentPage = 1;
      this.getNotices();
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
      this.getNotices();
    },
    async downloadFile(path) {
      try {
        const token = localStorage.getItem('token');
        const response = await axios.get('/api/file', {
          params: {
            path: path
          },
          headers: {
            Authorization: token
          },
          responseType: 'blob'
        });
        const blob = new Blob([response.data], { type: response.headers['content-type'] });
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        const contentDisposition = response.headers['content-disposition'];
        const fileName = contentDisposition? contentDisposition.split('filename*=UTF-8\'\'')[1] : 'downloaded_file';
        a.download = fileName;
        a.click();
        window.URL.revokeObjectURL(url);
        ElMessage.success('文件下载成功');
      } catch (error) {
        ElMessage.error('文件下载失败：' + error.message);
      }
    }
  },
  mounted() {
    this.getNotices();
  }
};
</script>

<style scoped>
.notice-center {
  padding: 15px;
  display: flex;
  width: 100%;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中，可按需选择是否添加 */
}

.personal-info {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 15px;
  width: 80%;
  height: 80%;
  background-color: #ffffff; /* 将背景颜色设置为白色 */
}

.title {
  margin-bottom: 20px;
  color: #136bbd;
  font-size: 24px;
  font-weight: bold;
}

.el-table {
  margin-bottom: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.el-table th {
  background-color: #f5f7fa;
  font-weight: bold;
}

.el-table td {
  padding: 12px;
}

.search-container {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  justify-content: flex-start; /* 添加这一行 */
}

.search-input {
  width: 18%; /* 设置百分比宽度 */
  margin-left: 10px;
}

.search-button {
  min-width: 80px;
  margin-left: 10px;
}

.detail-content {
  padding: 15px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background-color: #f9fafc;
}

pre {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background-color: #ffffff;
}

/* 新增dialog内表格样式 */
.el-dialog table {
  border: 1px solid #eee;
}

.el-dialog th,
.el-dialog td {
  border: 1px solid #eee;
  padding: 8px;
  text-align: left;
}

.el-dialog thead th {
  background-color: #f5f7fa;
  font-weight: bold;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  font-size: 16px;
  color: #666;
}
</style>